<template>
    <fieldset>
        <legend>失效函数的应用</legend>
        <h1 id="content" ref="hh">
            {{ content }}
        </h1>
        <button v-for="(btn, index) in buttons" :class="{ active: index + 1 === page }" :key="index"
            @click="pageChange(index + 1)">第{{
        index
        + 1
            }}页</button>

    </fieldset>
</template>
<script setup>
import { ref, onMounted, reactive, watchEffect } from "vue"
import CancelPromise from "./cancelPromise"

//声明3个按钮

let buttons = reactive(['第1页', '第2页', '第3页'])

//模拟3个请求,响应的时间不一样



let api1 = signal => new CancelPromise((resolve, reject) => {
    setTimeout(() => {
        resolve('第一页的数据')
    }, 1000)
}, signal)

let api2 = signal => new CancelPromise((resolve, reject) => {
    setTimeout(() => {
        resolve('第二页的数据')
    }, 1500)
}, signal)

let api3 = signal => new CancelPromise((resolve, reject) => {
    setTimeout(() => {
        resolve('第三页的数据')
    }, 2000)
}, signal)

//怎么取消(中断)promise,在promise内部直接抛出异常(throw Error,new DOMExpection())

//AbortController 
// 一个原生的语法，是一个构造函数，用于创建一个控制器对象，可以用于中止一个或多个web请求
// 一个关键属性，叫做signal,signal需要和逻辑进行关联，
// 可以手动在需要中止逻辑的内部，
// 通过signal.addEventListener('abort',()=>{})添加侦听，
// 回调函数中可以通过抛出异常的方式，来中断请求或者中断其他业务逻辑
// let abortController = new AbortController();
// let signal =abortController.signal;
// //...某些函数内部
// signal.addEventlistener('abort',()=>{
// //抛出异常来中断逻辑
// })


//模拟请求
let api = {
    api1,//1000
    api2,//2000
    api3//3000
}

//声明一个响应式的变量

let content = ref('')

//点击分页获取分页数据
//声明一个三方的响应式变量来作为按钮的激活条件
let page = ref(1)

let pageChange = (pageSize) => {

    //给三方作为激活条件的变量进行赋值
    page.value = pageSize
}

//封装一个获取内容的方法
/**
 * 
 * @param {Number} pageSize 传递给后台的页码
 * @param {Object} signal 控制器(AbortController)的signal对象
 */
//  @param {数据类型} 参数 参数的描述

let fetchData = (pageSize = 1, signal) => (
    api['api' + pageSize](signal)
        .then(res => {
            console.log(res)
            content.value = res;
        })
)




//使用watchEffect

watchEffect(invalidate => {

    //声明一个控制
    let abortController = new AbortController();
    //获取signal对象
    let signal = abortController.signal;
    //发起请求,并且传入signal对象
    fetchData(page.value, signal)
    invalidate(() => {
        //页面切换之前,取消上一个promise
        abortController.abort()
    })
})

let hh = ref()
//watchEffect配置项
//pre dom挂载之前执行

//post dom挂载之后执行

watchEffect(() => {
    console.log(hh.value)
},{
    flush:'pre'
})
//页面加载的时候,获取第一页的数据

// onMounted(() => {
//     fetchData()
// })

</script>
<style>
.active {
    background: hotpink;
}
</style>